import React from 'react';
import {connect} from 'dva';
import {Form, Input, InputNumber, Select, Button, Radio, Modal, message} from 'antd';
import {powerControl} from '../../utils/powerControl';
const AuthButton = powerControl(Button);

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const {Option} = Select;

@connect(state => ({
    memberList: state.memberList,
}))
@Form.create()
export default class MemberEdit extends React.Component {
    state = {
        loading: false,
        visible: false,
        data: this.props.data,
        pagination: this.props.memberList.pagination,
        rankNames: this.props.memberList.rankNames,
    };
    showModal = () => {
        this.setState({
            visible: true,
        });
    };
    handleSubmit = (e) => {
        this.setState({loading: true});
        e.preventDefault();
        const {dispatch, form} = this.props;
        form.validateFields((err, filedValue) => {
            if (err) return;
            const values = {
                ...(this.state.data),
                ...filedValue,
            };
            dispatch({
                type: 'memberList/updateUser',
                payload: values,
                callback: (response) => {
                    if (response.result == 0) {
                        message.success('编辑成功');
                        this.handleEditSuccess();
                        this.setState({loading: false, visible: false});
                    } else {
                        message.error('编辑失败');
                        this.setState({loading: false});
                    }
                }
            });
        });
    };

    handleEditSuccess = () => {
        const {dispatch, searchValues} = this.props;
        const {pagination} = this.state;
        const values = {
            currentPage: pagination.current,
            pageSize: pagination.pageSize,
            ...searchValues,
        };
        dispatch({
            type: 'memberList/queryUserList',
            payload: values,
        });
    };

    handleCancel = () => {
        this.setState({visible: false});
    };

    render() {
        const {visible, loading, data, rankNames} = this.state;
        const {getFieldDecorator} = this.props.form;

        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 7},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 12},
                md: {span: 10},
            },
        };

        const submitFormLayout = {
            wrapperCol: {
                xs: {span: 24, offset: 0},
                sm: {span: 10, offset: 7},
            },
        };

        return (
            <div>
                <AuthButton auth="memberlist.edit" size="small" type="primary" onClick={this.showModal}>
                    编辑
                </AuthButton>
                <Modal
                    visible={visible}
                    title="编辑会员信息"
                    onCancel={this.handleCancel}
                    footer={null}
                >
                    <Form onSubmit={this.handleSubmit}>
                        <FormItem
                            {...formItemLayout}
                            label="会员ID"
                        >
                            {(getFieldDecorator("userId", {initialValue: data.user_id}))(<Input disabled={true}/>)}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="会员类型"
                        >
                            {(getFieldDecorator("userType", {initialValue: data.user_type}))(<RadioGroup disabled>
                                <Radio value='普通会员'>普通会员</Radio>
                                <Radio value='分销会员'>分销会员</Radio>
                            </RadioGroup>)}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="会员名"
                        >
                            {(getFieldDecorator("nickName", {initialValue: data.nick_name}))(<Input/>)}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="用户现有资金"
                        >
                            {(getFieldDecorator("userMoney", {initialValue: data.user_money}))(<InputNumber min={0}
                                                                                                            step={0.01}/>)}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="用户冻结资金"
                        >
                            {(getFieldDecorator("frozenMoney", {initialValue: data.frozen_money}))(<InputNumber min={0}
                                                                                                                step={0.01}/>)}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="消费积分"
                        >
                            {(getFieldDecorator("payPoints", {initialValue: data.pay_points}))(<InputNumber/>)}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="会员等级积分"
                        >
                            {(getFieldDecorator("rankPoints", {initialValue: data.rank_points}))(<InputNumber/>)}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="会员级别"
                        >
                            {(getFieldDecorator("userRank", {initialValue: data.rank_name}))(<Select>
                                {rankNames.map(function (item, i) {
                                    return <Option value={i+1}>
                                        {item.rank_name}
                                    </Option>
                                })
                                }
                            </Select>)}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="是否生效"
                        >
                            {(getFieldDecorator("isValidated", {initialValue: data.is_validated}))(<RadioGroup>
                                <Radio value='不生效'>不生效</Radio>
                                <Radio value='生效'>生效</Radio>
                            </RadioGroup>)}
                        </FormItem>
                        <FormItem {...submitFormLayout} style={{marginTop: 32}}>
                            <Button type="primary" htmlType="submit" loading={loading}
                                    onClick={this.handleSubmit}>提交</Button>
                            <Button style={{marginLeft: 8}} onClick={this.handleCancel}>取消</Button>
                        </FormItem>
                    </Form>
                </Modal>
            </div>
        );
    }
}
